<!--  -->

<template>
  <keep-alive>
    <div class="orderlsit">
      <section class="container-main-header">
        <section class="header-left">
          <i class="el-icon-menu"></i>
          <h3>首页</h3>
          <span class="solidus">/</span>
          <h3>订单</h3>
          <span class="solidus">/</span>
          <span>退货申请处理</span>
        </section>
        <section class="header-right">
          <i class="el-icon-pear" @click="leaveHandle"></i>
        </section>
      </section>
      <section class="container-main-content">
        <div class="search-filters">
          <div class="search-filters-top">
            <div class="topLeft">
              <i class="el-icon-search"></i>&nbsp;&nbsp;
              <span>筛选搜索</span>
            </div>
            <div class="topRight">
              <el-button style="margin-right:15px;" class="resetBtn" @click="resetHandle">重置</el-button>
              <el-button type="primary" class="searFilBtn" @click="searchHandle">查询搜索</el-button>
            </div>
          </div>
          <div class="search-filters-bottom">
            <div class="input-item">
              <span>输入搜索：</span>
              <el-input
                v-model="input1"
                placeholder="服务单号"
                style="width:171px;height242px;margin-right:20px"
              ></el-input>
            </div>
            <div class="input-item">
              <span>处理状态：</span>
              <el-input
                v-model="input2"
                placeholder="全部"
                style="width:171px;height242px;margin-right:20px"
              ></el-input>
            </div>
            <div class="input-item">
              <span>申请时间：</span>
              <el-date-picker v-model="value1" type="date" placeholder="请选择时间" style="width:171px;"></el-date-picker>
            </div>
            <div class="input-item">
              <span>操作人员：</span>
              <el-input
                v-model="input3"
                placeholder="全部"
                style="width:171px;height242px;margin-right:20px"
              ></el-input>
            </div>
            <div class="input-item">
              <span>处理时间：</span>
              <el-date-picker v-model="value2" type="date" placeholder="请选择时间" style="width:171px;"></el-date-picker>
            </div>
          </div>
        </div>
        <div class="dataList">
          <el-row>
            <el-col :span="24">
              <div class="grid-content">
                <i class="el-icon-document"></i>&nbsp;&nbsp;
                <span>数据列表</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="dataListTable">
          <template>
            <el-table
              ref="multipleTable"
              :data="tableData.slice((currentPage - 1) * pageSize, currentPage*pageSize)"
              :border="border"
              tooltip-effect="dark"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="60" text-align="center"></el-table-column>
              <el-table-column label="服务单号" width="180">
                <template slot-scope="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column label="申请时间" width="180">
                <template slot-scope="scope">{{ scope.row.applytime }}</template>
              </el-table-column>
              <el-table-column label="用户账号" width="160">
                <template slot-scope="scope">{{ scope.row.user }}</template>
              </el-table-column>
              <el-table-column label="退款金额" width="180">
                <template slot-scope="scope">{{ scope.row.returnmoney }}</template>
              </el-table-column>
              <el-table-column label="申请状态" width="180">
                <template slot-scope="scope">{{ scope.row.applycode }}</template>
              </el-table-column>
              <el-table-column label="处理时间" width="180">
                <template slot-scope="scope">{{ scope.row.handletime }}</template>
              </el-table-column>
              <el-table-column label="操作">
                <el-button style="margin-right:15px;" class="view-details">查看详情</el-button>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div class="pagination">
          <div class="pagination-left">
            <el-select
              v-model="select"
              slot="prepend"
              placeholder="请选择"
              style="width:171px;height:24px;margin:0;margin-right:20px;"
            >
              <el-option label="批量删除" value="1"></el-option>
            </el-select>
            <el-button type="primary" class="sureBtn">确定</el-button>
          </div>
          <div class="pagination-right">
            <el-pagination
              @size-change="handleSizeChange"
              background
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15,]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length"
              style="float:right;"
            ></el-pagination>
          </div>
        </div>
      </section>
    </div>
  </keep-alive>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      border: true,
      tableData: [],
      // 分页数据
      currentPage: 1,
      pageSize: 5,
      total: 0, // 总条目数
      multipleSelection: [],
      border: true,
      select: "",
      input1: "",
      input2: "",
      input3: "",
      value1: "",
      value2: "",
      border: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    leaveHandle() {
      var n = confirm("是否退出登录");
      if (n == true) {
        window.sessionStorage.clear();
        location.reload();
      }
    },
    searchHandle() {
      var arr = this.tableData.filter((item) => {
        return item.applycode.indexOf(this.input2) != -1;
      });
      this.tableData = arr;
    },
    resetHandle() {
      this.input1 = "";
      this.input2 = "";
      this.input3 = "";
      this.value1 = "";
      this.value2 = "";
      this.$axios
        .get("returnapply.json")
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((err) => console.log(err));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$axios
      .get("returnapply.json")
      .then((res) => {
        this.tableData = res.data;
      })
      .catch((err) => console.log(err));
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.container-main-header {
  padding: 0 20px;
  align-items: center;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.header-left {
  display: flex;
  align-items: center;
}
.header-left h3 {
  font-size: 14px;
}
.solidus {
  margin: 0 5px;
}
.el-icon-menu {
  margin-right: 20px;
  font-size: 20px;
  cursor: pointer;
}
.el-icon-pear {
  font-size: 24px;
  cursor: pointer;
}
/* .orderlsit {
  min-height: 1200px;
} */
.container-main-content,
.search-filters {
  padding: 20px;
}
.search-filters {
  width: 100%;
  border: 1px solid #ececec;
}
.search-filters-top {
  display: flex;
  justify-content: space-between;
}
.resetBtn,
.searFilBtn,
.view-details {
  padding: 9px 15px;
  width: 56px;
  height: 32px;
  font-size: 12px;
}
.searFilBtn,
.view-details {
  width: 80px;
  margin: 0;
}
.search-filters-bottom {
  display: flex;
  flex-wrap: wrap;
  padding-right: 100px;
  padding-left: 30px;
}
.input-item {
  margin: 20px;
}
.el-row {
  margin: 20px 0;
}
.el-col {
  border: 1px solid #ececec;
  height: 60px;
  padding: 20px;
}
.dataListTable {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.sureBtn {
  padding: 9px 15px;
  height: 32px;
  font-size: 12px;
  width: 80px;
  margin: 0;
}
::v-/deep/ td,
::v-/deep/ th {
  text-align: center;
}
</style>